<script setup lang="ts">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import EChartsComponent from "@/components/EChartsComponent/index.vue";
import { exportExcel } from "@/utils/excel";
import { PaginationProps } from "@pureadmin/table";
import { onMounted, reactive, ref } from "vue";
import { getDataBySQLDesc } from "@/api/common";
import { usePurchasePriceData } from "./utils/hook";
defineOptions({
  name: "PurchasePrice"
});
const {
  form,
  columns,
  dataList,
  pagination,
  onSearch,
  loading,
  isShow,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  search_columns,
  handleChange,
  handleSearch,
  handleReset,
  chartOption
} = usePurchasePriceData();
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch v-model="form" :columns="search_columns" :show-number="4" label-width="120" label-position="right"
        search-text="搜索" reset-text="重置" expand-text="展开" retract-text="收起" @change="handleChange"
        @search="handleSearch" @reset="handleReset" />
    </el-card>
    <el-card class="chart-card mt-[20px]">
      <div class="chart">
        <EChartsComponent :extraOptions="chartOption" type="line" />
      </div>
    </el-card>
    <el-card class="table-card">
      <div class="operate">
        <el-button type="primary" @click="exportExcel(dataList, '采购价格趋势分析.xlsx')">导出</el-button>
      </div>
      <PureTable ref="tableRef" :loading="loading" border row-key="id" alignWhole="center" showOverflowTooltip
        :data="dataList" :columns="columns" :pagination="pagination" />
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.chart {
  height: 400px;
  width: 100%;
}

.table-card {
  margin-top: 20px;
}

.operate {
  margin-bottom: 20px;
}
</style>
